<template>
  <div class="enterprise-content">
    <!-- 企业服务展示 -->
    <section class="enterprise-hero">
      <div class="container">
        <div class="hero-content">
          <h1>智索真源 · 企业级任务撮合平台</h1>
          <p class="hero-subtitle">让企业外包从"经验决策"走向"智能决策"，构建可信赖的企业级协作生态</p>
          <div class="enterprise-benefits">
            <div class="benefit-item">
              <span class="benefit-number">92%</span>
              <span class="benefit-label">报价精准度提升</span>
            </div>
            <div class="benefit-item">
              <span class="benefit-number">3倍</span>
              <span class="benefit-label">匹配效率提升</span>
            </div>
            <div class="benefit-item">
              <span class="benefit-number">90%</span>
              <span class="benefit-label">项目纠纷率下降</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 核心功能 -->
    <section class="core-features">
      <div class="container">
        <div class="section-header">
          <h2>核心功能：智能决策与可信验证</h2>
          <p>我们围绕"智能决策"与"可信验证"两条主线，为企业提供透明、高效、安全、可持续的外包管理</p>
        </div>
        
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="feature-content">
              <h3>企业认证发布机制</h3>
              <p>平台仅支持通过统一社会信用代码认证的企业账号进行任务发布，确保任务的真实性与高价值性</p>
              <ul class="feature-list">
                <li>统一社会信用代码验证</li>
                <li>详细任务描述与期望成果</li>
                <li>AI自动分区评级与金额估算</li>
                <li>项目周期智能规划</li>
              </ul>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-coins"></i>
            </div>
            <div class="feature-content">
              <h3>创新"技术股"发布模式</h3>
              <p>不同于传统的"资金外包"模式，企业可选择"技术股"或"股权+现金"的混合形式发布任务</p>
              <ul class="feature-list">
                <li>纯技术股任务发布</li>
                <li>股权+现金混合模式</li>
                <li>AI智能测算合理股份比例</li>
                <li>基于企业估值与市场行情</li>
              </ul>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-brain"></i>
            </div>
            <div class="feature-content">
              <h3>AI智能匹配最优人才</h3>
              <p>平台智能推荐系统根据任务特征，自动匹配以往成功完成过相似任务的优秀人才</p>
              <ul class="feature-list">
                <li>过往战绩与完成度分析</li>
                <li>专业技能标签匹配</li>
                <li>地区与响应速度考量</li>
                <li>历史信誉分综合评估</li>
              </ul>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <i class="fas fa-chart-pie"></i>
            </div>
            <div class="feature-content">
              <h3>数据驱动的成长生态</h3>
              <p>随着任务完成与数据沉淀，平台持续学习形成智能化生态闭环，实现企业与人才的精准匹配</p>
              <ul class="feature-list">
                <li>任务类型与人才画像学习</li>
                <li>智能化生态闭环构建</li>
                <li>个人价值持续增长</li>
                <li>真实项目信誉积累</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 平台优势 -->
    <section class="platform-advantages">
      <div class="container">
        <div class="section-header">
          <h2>平台核心优势</h2>
          <p>相比传统外包平台，我们提供更智能、更灵活的解决方案</p>
        </div>
        
        <div class="advantages-comparison">
          <div class="comparison-card our-platform featured-platform">
            <div class="card-badge good-badge">
              <i class="fas fa-check-circle"></i>
              <span>智能推荐</span>
            </div>
            <h3>我们的平台</h3>
            <ul>
              <li v-for="(item, index) in ourPlatformItems" :key="index"
                  :data-index="index"
                  @mouseenter="showTooltip(index, 'our-platform')"
                  @mouseleave="hideTooltip()">
                <i class="fas fa-star"></i>
                <span>{{ item.text }}</span>
              </li>
            </ul>
            <div class="platform-highlight">
              <i class="fas fa-rocket"></i>
              <span>全面升级</span>
            </div>
          </div>

          <div class="vs-divider">
            <span>VS</span>
            <div class="vs-glow"></div>
          </div>

          <div class="comparison-card traditional">
            <div class="card-badge bad-badge">
              <i class="fas fa-times-circle"></i>
              <span>传统局限</span>
            </div>
            <h3>传统外包平台</h3>
            <ul>
              <li v-for="(item, index) in traditionalItems" :key="index" 
                  :data-index="index"
                  @mouseenter="showTooltip(index, 'traditional')"
                  @mouseleave="hideTooltip()">
                <i class="fas fa-times-circle"></i>
                <span>{{ item.text }}</span>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 全局Tooltip容器 -->
        <div class="global-tooltip-container">
          <div v-if="activeTooltip !== null && hoveredType === 'traditional'" class="item-tooltip traditional-tooltip">
            <i class="fas fa-exclamation-circle"></i>
            <p>{{ traditionalItems[activeTooltip].explanation }}</p>
          </div>
          <div v-if="activeTooltip !== null && hoveredType === 'our-platform'" class="item-tooltip our-platform-tooltip">
            <i class="fas fa-lightbulb"></i>
            <p v-html="highlightKeywords(ourPlatformItems[activeTooltip].explanation)"></p>
          </div>
        </div>
      </div>
    </section>

    <!-- 解决方案 -->
    <section class="solutions">
      <div class="container">
        <div class="section-header">
          <h2>行业解决方案</h2>
          <p>为不同行业提供定制化的任务撮合解决方案</p>
        </div>
        
        <div class="solutions-grid">
          <div class="solution-card">
            <div class="solution-icon">
              <i class="fas fa-laptop-code"></i>
            </div>
            <h3>软件外包与科技创新</h3>
            <p>为软件开发和科技创新企业提供专业的技术人才匹配服务</p>
            <div class="solution-features">
              <span>AI算法开发</span>
              <span>区块链技术</span>
              <span>大数据分析</span>
            </div>
          </div>
          
          <div class="solution-card">
            <div class="solution-icon">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <h3>教育培训与人才服务</h3>
            <p>为教育培训机构提供优质的人才培养和项目实践平台</p>
            <div class="solution-features">
              <span>课程设计</span>
              <span>教学资源</span>
              <span>实践项目</span>
            </div>
          </div>
          
          <div class="solution-card">
            <div class="solution-icon">
              <i class="fas fa-building"></i>
            </div>
            <h3>中小型企业外包</h3>
            <p>为需要高可信度外包合作的中小型公司提供安全可靠的服务</p>
            <div class="solution-features">
              <span>风险控制</span>
              <span>成本优化</span>
              <span>质量保证</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 成功案例 -->
    <section id="success-cases" class="success-cases">
      <div class="container">
        <div class="section-header">
          <h2>成功案例</h2>
          <p>见证我们的技术实力和客户成功，推动"能力本位"经济发展</p>
        </div>
        
        <div class="cases-grid-single-row">
          <div class="case-card-new">
            <div class="case-icon-area">
              <i class="fas fa-graduation-cap"></i>
            </div>
            <div class="case-content-area">
              <h3>某英语音标智能学习系统</h3>
              <p>通过眼到，手到，口到，耳到，脑到结合AI实现智能音标学习，提升学习效率。</p>
              <div class="case-metrics">
                <div class="metric">
                  <span class="metric-label">效率提升</span>
                  <span class="metric-value">85%</span>
                </div>
                <div class="metric">
                  <span class="metric-label">成本降低</span>
                  <span class="metric-value">60%</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="case-card-new">
            <div class="case-icon-area">
              <i class="fas fa-cogs"></i>
            </div>
            <div class="case-content-area">
              <h3>某制造业信息智能调度平台</h3>
              <p>通过AI技术实现智能信息调度，提升制造效率和质量。</p>
              <div class="case-metrics">
                <div class="metric">
                  <span class="metric-label">效率提升</span>
                  <span class="metric-value">70%</span>
                </div>
                <div class="metric">
                  <span class="metric-label">成本降低</span>
                  <span class="metric-value">45%</span>
                </div>
              </div>
            </div>
          </div>
          
          <div class="case-card-new">
            <div class="case-icon-area">
              <i class="fas fa-shield-alt"></i>
            </div>
            <div class="case-content-area">
              <h3>某教育考试反作弊系统</h3>
              <p>实行智能监控以及智能评估和认证体系，提升考试公平性。</p>
              <div class="case-metrics">
                <div class="metric">
                  <span class="metric-label">效率提升</span>
                  <span class="metric-value">90%</span>
                </div>
                <div class="metric">
                  <span class="metric-label">成本降低</span>
                  <span class="metric-value">30%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 政府支持 -->
    <section class="government-support">
      <div class="container">
        <div class="section-header">
          <h2>政府支持与政策红利</h2>
          <p>智索真源已获得芜湖市政府强力支持，入驻神山智谷科技园区</p>
        </div>
        
        <div class="support-content">
          <div class="support-item">
            <div class="support-icon">
              <i class="fas fa-handshake"></i>
            </div>
            <h3>招商引资服务合作协议</h3>
            <p>与镜湖区人民政府签订合作协议，获得政策支持和资源倾斜</p>
          </div>
          
          <div class="support-item">
            <div class="support-icon">
              <i class="fas fa-building"></i>
            </div>
            <h3>神山智谷科技园区</h3>
            <p>正式入驻芜湖市神山智谷，享受园区政策优惠和品牌曝光机会</p>
          </div>
          
          <div class="support-item">
            <div class="support-icon">
              <i class="fas fa-chart-line"></i>
            </div>
            <h3>政策资源支持</h3>
            <p>获得政府园区的政策资源与品牌曝光机会，为企业发展提供强力支撑</p>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'EnterpriseContent',
  data() {
    return {
      activeTooltip: null,
      hoveredType: null,
      traditionalItems: [
        {
          text: '仅支持现金交易',
          explanation: '传统平台仅提供现金支付，无法满足企业和人才的多样化需求，缺乏灵活性和创新性，导致资源配置效率低下。'
        },
        {
          text: '坚决抵制甲乙方线下沟通',
          explanation: '传统平台为了维护自身利益，严格限制甲乙方直接沟通，这导致信息传递失真、项目需求理解偏差，增加沟通成本。'
        },
        {
          text: '人才匹配精度低',
          explanation: '缺乏AI智能算法，仅基于简单的关键词匹配，无法深度分析任务需求与人才能力，导致匹配成功率低、合作满意度差。'
        },
        {
          text: '缺乏企业认证机制',
          explanation: '没有统一的企业认证体系，难以保障任务发布方的真实性和资质，增加了交易风险和人才的专业匹配难度。'
        },
        {
          text: '用户经验缺乏认证',
          explanation: '无法有效记录和认证用户的过往项目经验，导致优秀人才难以脱颖而出，企业也难以识别真正有能力的人才。'
        },
        {
          text: '无法积累长期价值',
          explanation: '传统外包模式为一次性交易，用户无法通过持续合作积累信誉和价值，形成良性的长期职业发展生态。'
        },
        {
          text: '匹配算法简单',
          explanation: '仅使用基础的规则匹配，无法学习和优化，不能适应复杂多变的任务需求，匹配效果随任务复杂度增加而急剧下降。'
        }
      ],
      ourPlatformItems: [
        {
          text: '技术股+现金混合模式',
          explanation: '我们创新性地引入技术股模式，让企业可以用股权+现金的方式发布任务，既降低了企业的现金流压力，又能激励人才深度参与项目，实现真正的利益绑定和长期合作。这种模式特别适合初创企业和有潜力的创新项目。'
        },
        {
          text: '支持鼓励线下交流',
          explanation: '我们认为良好的沟通是项目成功的关键。平台鼓励甲乙方线下深入交流，不收取额外费用，反而提供交流补贴。这样可以确保需求精准传达，减少后期返工，提高项目成功率的同时降低沟通成本。'
        },
        {
          text: 'AI智能精准匹配',
          explanation: '基于机器学习算法，我们深度分析任务需求、人才技能、历史项目表现、合作评价等多维度数据，实现精准匹配。匹配成功率达92%以上，远超传统平台的50-60%，大幅降低企业的筛选成本和人才的求职时间。'
        },
        {
          text: '企业统一信用代码认证',
          explanation: '我们要求所有发布任务的企业必须通过统一社会信用代码认证，确保企业真实存在且具备基本资质。这不仅保护了人才的利益，也建立了高质量的雇主生态，提升整体平台的专业度和可信度。'
        },
        {
          text: '股权激励长期价值',
          explanation: '通过技术股机制，优秀人才可以获得项目股权，真正参与到企业成长中。这不仅提供长期收益机会，还让人才更有主人翁意识，愿意投入更多时间和精力，形成良性的合作生态和职业发展路径。'
        },
        {
          text: '用户成长化能力认证',
          explanation: '基于区块链技术，我们建立了去中心化的能力认证体系。每个项目的完成、技能的应用、用户的评价都会永久记录，形成可信的能力画像。随着项目经验的积累，用户的信誉和能力值不断提升，实现真正的职业成长。'
        },
        {
          text: '多维度智能算法',
          explanation: '我们的AI系统综合分析技术能力、沟通能力、项目经验、时间管理、创新思维等多个维度，构建360度的人才画像。算法会不断学习和优化，随着数据积累而日益精准，确保每一次匹配都是最佳选择。'
        }
      ]
    }
  },
  methods: {
    showTooltip(index, type) {
      this.activeTooltip = index
      this.hoveredType = type
    },
    hideTooltip() {
      this.activeTooltip = null
      this.hoveredType = null
    },
    highlightKeywords(text) {
      // 定义需要高亮的关键词和对应的颜色
      const keywords = [
        // 技术相关 - 蓝色
        { words: ['AI', '人工智能', '机器学习', '算法', '智能', '区块链', '大数据', '技术股', '股权', '认证', '匹配'], color: '#3b82f6' },
        // 价值相关 - 绿色
        { words: ['价值', '收益', '成长', '发展', '成功', '效率', '提升', '降低', '优化', '创新'], color: '#22c55e' },
        // 问题相关 - 红色
        { words: ['缺乏', '无法', '抵制', '限制', '风险', '问题', '困难', '不足', '低下', '简单'], color: '#ef4444' },
        // 动作相关 - 橙色
        { words: ['实现', '提供', '支持', '鼓励', '建立', '积累', '参与', '投入', '学习', '优化'], color: '#f97316' },
        // 概念相关 - 紫色
        { words: ['模式', '机制', '体系', '生态', '平台', '合作', '沟通', '交流', '项目', '任务'], color: '#8b5cf6' }
      ]
      
      let highlightedText = text
      
      keywords.forEach(keywordGroup => {
        keywordGroup.words.forEach(word => {
          const regex = new RegExp(`(${word})`, 'g')
          highlightedText = highlightedText.replace(regex, `<span class="highlight-keyword" style="color: ${keywordGroup.color}; font-weight: 600; text-shadow: 0 0 8px ${keywordGroup.color}40;">$1</span>`)
        })
      })
      
      return highlightedText
    }
  }
}
</script>

<style scoped>
.enterprise-content {
  color: white;
}

.enterprise-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #06b6d4 100%);
  padding: 120px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.enterprise-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.hero-content h1 {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle {
  font-size: 1.3rem;
  opacity: 0.9;
  max-width: 800px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

.enterprise-benefits {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.benefit-item {
  text-align: center;
}

.benefit-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 700;
  color: #fbbf24;
  margin-bottom: 0.5rem;
}

.benefit-label {
  font-size: 1rem;
  opacity: 0.9;
}

.core-features,
.platform-advantages,
.solutions,
.success-cases,
.government-support {
  padding: 80px 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 25%, #334155 50%, #475569 75%, #64748b 100%);
  position: relative;
  overflow: hidden;
}

.core-features::before,
.platform-advantages::before,
.solutions::before,
.success-cases::before,
.government-support::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(6, 182, 212, 0.05) 50%, rgba(139, 92, 246, 0.05) 100%);
  pointer-events: none;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
}

.section-header h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.9;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.feature-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 24px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease;
  position: relative;
  z-index: 1;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.feature-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.feature-icon i {
  font-size: 2rem;
  color: white;
}

.feature-content h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
}

.feature-content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
}

.feature-list {
  list-style: none;
  padding: 0;
}

.feature-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list li::before {
  content: '✓';
  color: #06b6d4;
  font-weight: bold;
}

.advantages-comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 5rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}

.comparison-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2.5rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
}

.comparison-card.traditional {
  border-color: rgba(239, 68, 68, 0.3);
  opacity: 0.6;
  z-index: 1;
  transform: scale(0.95) translateX(-20px);
}

.comparison-card.our-platform {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 40px rgba(34, 197, 94, 0.2);
  z-index: 2;
}

.comparison-card.featured-platform {
  transform: scale(1.12) translateX(40px);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(255, 255, 255, 0.12) 100%);
  border-width: 2px;
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 80px rgba(34, 197, 94, 0.4), 0 15px 50px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.comparison-card.featured-platform:hover {
  transform: scale(1.15) translateX(40px);
  box-shadow: 0 0 100px rgba(34, 197, 94, 0.5), 0 20px 60px rgba(0, 0, 0, 0.4);
}

.comparison-card h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  text-align: center;
}

.comparison-card.traditional h3 {
  color: #ef4444;
}

.comparison-card.our-platform h3 {
  color: #22c55e;
}

.comparison-card ul {
  list-style: none;
  padding: 0;
}

.comparison-card li {
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
}

.comparison-card.traditional li {
  color: rgba(255, 255, 255, 0.6);
}

.comparison-card.our-platform li {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}

.comparison-card li:hover {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transform: translateX(5px);
}

.comparison-card li i.fa-times-circle {
  color: #ef4444;
  font-size: 0.9rem;
}

.comparison-card li i.fa-star {
  color: #fbbf24;
  font-size: 0.9rem;
}

.comparison-card li:last-child {
  border-bottom: none;
}

/* 全局Tooltip容器 */
.global-tooltip-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10000;
}

/* Tooltip样式 */
.item-tooltip {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  max-width: 90vw;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(30px);
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  z-index: 10001;
  opacity: 0;
  animation: tooltipFadeIn 0.3s ease forwards;
  pointer-events: none;
}

.traditional-tooltip {
  border-left: 5px solid #ef4444;
}

.traditional-tooltip i {
  color: #ef4444;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  display: block;
}

.our-platform-tooltip {
  border-left: 5px solid #22c55e;
}

.our-platform-tooltip i {
  color: #fbbf24;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  display: block;
}

.item-tooltip p {
  color: #1f2937;
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.highlight-keyword {
  transition: all 0.3s ease;
  border-radius: 3px;
  padding: 1px 2px;
  display: inline-block;
}

.highlight-keyword:hover {
  transform: scale(1.05);
  text-shadow: 0 0 12px currentColor !important;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.vs-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff6b6b, #4ecdc4, #45b7d1);
  background-size: 200% 200%;
  border-radius: 50%;
  font-weight: 900;
  font-size: 1.5rem;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  box-shadow: 
    0 0 20px rgba(255, 107, 107, 0.4),
    0 0 40px rgba(78, 205, 196, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 10;
  animation: pulseVS 2s infinite, gradientShift 3s ease-in-out infinite;
  border: 2px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  margin: 0 auto;
}

.vs-glow {
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #ff6b6b);
  border-radius: 50%;
  opacity: 0.5;
  animation: rotateGlow 4s linear infinite;
  z-index: -1;
}

.vs-divider::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  border-radius: 50%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes rotateGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes pulseVS {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes pulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.1; }
}

.card-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.bad-badge {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.good-badge {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5);
  animation: badgePulse 2s infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(34, 197, 94, 0.5); }
  50% { box-shadow: 0 4px 30px rgba(34, 197, 94, 0.8); }
}

.platform-highlight {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #22c55e;
  font-weight: 600;
  font-size: 1.1rem;
  animation: highlightGlow 3s infinite;
}

@keyframes highlightGlow {
  0%, 100% { border-color: rgba(34, 197, 94, 0.4); }
  50% { border-color: rgba(34, 197, 94, 0.8); box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.solution-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.solution-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
}

.solution-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.solution-icon i {
  font-size: 1.5rem;
  color: white;
}

.solution-card h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.solution-card p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.solution-features {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.solution-features span {
  background: rgba(59, 130, 246, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.case-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.case-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.case-header h3 {
  font-size: 1.2rem;
  color: white;
}

.case-industry {
  background: rgba(59, 130, 246, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.case-content p {
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.8);
}

.case-results {
  display: flex;
  gap: 1rem;
}

.result-item {
  flex: 1;
  text-align: center;
  padding: 0.8rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.result-label {
  display: block;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.3rem;
}

.result-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #fbbf24;
}

.cases-grid-single-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.case-card-new {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 24px;
  overflow: hidden;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.case-card-new:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.4);
}

.case-icon-area {
  background: linear-gradient(135deg, #3b82f6 0%, #06b6d4 50%, #8b5cf6 100%);
  padding: 3rem 2rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-icon-area i {
  font-size: 3rem;
  color: white;
}

.case-content-area {
  padding: 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.4) 0%, rgba(59, 130, 246, 0.2) 100%);
}

.case-content-area h3 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.case-content-area p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  color: rgba(255, 255, 255, 0.9);
  flex: 1;
}

.case-metrics {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.metric {
  background: rgba(59, 130, 246, 0.15);
  padding: 0.8rem;
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fbbf24;
}

.support-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.support-item {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  z-index: 1;
}

.support-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.support-icon i {
  font-size: 1.5rem;
  color: white;
}

.support-item h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: white;
}

.support-item p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2.5rem;
  }
  
  .enterprise-benefits {
    gap: 2rem;
  }
  
  .benefit-number {
    font-size: 2rem;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .advantages-comparison {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .vs-divider {
    order: 2;
    margin: 1rem 0;
  }
  
  .comparison-card.traditional {
    order: 1;
  }
  
  .comparison-card.our-platform {
    order: 3;
  }
  
  .item-tooltip {
    position: fixed;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
    width: 90% !important;
    max-width: 350px !important;
    max-height: 60vh;
    overflow-y: auto;
  }
  
  .solutions-grid,
  .cases-grid,
  .cases-grid-single-row,
  .support-content {
    grid-template-columns: 1fr;
  }
  
  .case-icon-area i {
    font-size: 2rem;
  }
  
  .case-content-area h3 {
    font-size: 1.1rem;
  }
  
  .metric-value {
    font-size: 1.2rem;
  }
}
</style>
